<script setup lang="ts">
const { animateOnScroll } = useScrollAnimation()

// 合作企业logo列表
const partners = [
  { id: 1, name: '合作企业1', logo: '/home/partners/11.png' },
  { id: 2, name: '合作企业2', logo: '/home/partners/12.png' },
  { id: 3, name: '合作企业3', logo: '/home/partners/13.png' },
  { id: 4, name: '合作企业4', logo: '/home/partners/14.png' },
  { id: 5, name: '合作企业5', logo: '/home/partners/15.png' },
  { id: 6, name: '合作企业6', logo: '/home/partners/16.png' },
  { id: 7, name: '合作企业7', logo: '/home/partners/17.png' },
  { id: 8, name: '合作企业8', logo: '/home/partners/18.png' },
  { id: 9, name: '合作企业9', logo: '/home/partners/19.png' },
  { id: 10, name: '合作企业10', logo: '/home/partners/20.png' },
  { id: 11, name: '合作企业11', logo: '/home/partners/21.png' },
  { id: 12, name: '合作企业12', logo: '/home/partners/22.png' },
]
</script>

<template>
  <section class="py-16 md:py-24" style="background: linear-gradient(to top right, #dde0ff, #ffffff)">
    <div class="mx-auto px-4 max-w-5xl">
      <!-- 标题部分 -->
      <div class="text-center mb-12 md:mb-16">
        <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
          合作案例
        </h2>
        
      </div>

      <!-- 合作企业Logo展示 -->
      <div class="mt-16">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8">
          <div
            v-for="(partner, index) in partners"
            :key="partner.id"
            :ref="(el) => { if (el) animateOnScroll(el as HTMLElement, index * 50) }"
            class="bg-white rounded-xl p-1 md:p-2 shadow-sm hover:shadow-md transition-all border border-gray-100 flex items-center justify-center group"
          >
            <img
              :src="partner.logo"
              :alt="partner.name"
              class="cursor-pointer max-w-full h-22 object-contain transition-all duration-300 group-hover:scale-110"
            />
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

